<template>
	<!-- starType是计算属性，只有size变化，starType才会变化，多次访问starType还是使用原来的计算结果，starType是基于size的响应式依赖而缓存的 -->
	<div class="star" :class="starType">
		<!-- 遍历itemClasses计算属性,返回的是一个数组 -->
		<!-- 绑定class，class="on"（亮）, class="half"（亮一半） class="off"（无效果） -->
		<!-- class="star-item"实现星星的效果 -->
		<span v-for="(itemClass,index) in itemClasses"
					:key="index"
					:class="itemClass"
					class="star-item">
		</span>
	</div>
</template>

<script>
// 定义常量，LENGTH（长度）,CLS_ON（class-on：true）,CLS_HALF,CLS_OFF
const LENGTH = 5 				// 星星数目为5
const CLS_ON = 'on';		// 一颗星星
const CLS_HALF = 'half'	// 半颗星星
const CLS_OFF = 'off'		// 零颗星星

export default {
	name: "Star",
	// 接收数据，size尺寸48，score分数4.2
	props: {
		size: {
			type: Number
		},
		score: {
			type: Number
		}
	},
	computed:{
		// 计算属性：基于响应式依赖而缓存的属性
		// es5写法 starType: function () {} 
		// es6写法 
		starType () { //看样式 star-48， star-36， star-24 
			return 'star-' + this.size
		},
		itemClasses () {
			//结果 []
			let result = []
			//分数取整，分数先乘2，再向下取整再除以2，例如这里score为4.2，Math.floor(4.2*2) = 8 / 2 = 4，但是如果是4.5，最后score也是4.5
			let score = Math.floor(this.score*2)/2
			//decimal 小数,  score除以1是否能有余数，有返回true 或 false
			let hasDecimal = score % 1 !==0
			//整数,向下取整，例如是4，最后取整是4
			let integer = Math.floor(score)
			//遍历整数integer ,integer = 4
			for (let i=0;i<integer;i++) {
				//每遍历一次,把'on'添加进[]
				//['on'，'on'，'on'，'on']
				result.push(CLS_ON)
			}
			//判断score是否有小数
			if (hasDecimal) {
				//假设有,['on'，'on'，'on'，'on','half']
				result.push(CLS_HALF)
			}
			//判断result（数组）长度和常量LENGTH比较，比如4.5长度为5 
			if (result.length < LENGTH) {
				//['on'，'on'，'on'，'on']为4，添加off，因为分数小于等于4，所以剩下要添加星星
				result.push(CLS_OFF)
			}
			//返回数组[]
			return result
		}

	}
}
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/mixin.styl'

.star
	.star-item 
		display: inline-block
		background-repeat: no-repeat
		
	&.star-48
		.star-item
			width: 20px
			height: 20px
			margin-right: 22px
			background-size: 20px 20px
			&:last-child
				margin-right: 0
			&.on
				bg-image('star48_on')
			&.half
				bg-image('star48_half')
			&.off
				bg-image('star48_off') 

	 &.star-36
		.star-item
			width: 15px
			height: 15px
			margin-right: 16px
			background-size: 15px 15px
			&:last-child
				margin-right: 0
			&.on
				bg-image('star36_on')
			&.half
				bg-image('star36_half')
			&.off
				bg-image('star36_off') 

		&.star-24 
			.star-item
				width: 10px
				height: 10px
				margin-right: 3px
				background-size: 10px 10px
				&:last-child
					margin-right: 0
				&.on
					bg-image('star24_on')
				&.half
					bg-image('star24_half')
				&.off
					bg-image('star24_off')        
</style>